Ext.define('BISC.view.MyViewport', {
  extend: 'Ext.container.Viewport',
  requires: [
    'BISC.view.ImagesPanel',
    'BISC.view.MonitorsPanel',
    'BISC.view.PropertiesPanel',
    'BISC.view.FilterManagerWindow',
    'BISC.view.ServerManagerWindow'
  ],
  id: 'myViewport',
  layout: 'border',

  initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
      items: [
        {
          xtype: 'panel',
          id: 'bis',
          layout: {
            type: 'border'
          },
          bodyBorder: false,
          title: false,
          region: 'center',
          dockedItems: [
            {
              xtype: 'toolbar',
              id: 'MainToolbar',
              width: 150,
              region: 'east',
              dock: 'top',
              items: [
                {
                  xtype: 'button',
                  text: 'Tools',
                  menu: {
                    xtype: 'menu',
                    items: [
                      {
                        xtype: 'menuitem',
                        iconCls: 'icon_monitors',
                        text: 'Monitor Manager',
                        scope: me,
                        handler: me.onFolderManagerClick
                      },
                      {
                        xtype: 'menuitem',
                        iconCls: 'icon_attribution',
                        text: 'Attribution Manager',
                        scope: me,
                        handler: me.onFilterManagerClick
                      },
                      {
                        xtype: 'menuitem',
                        iconCls: 'icon_devices',
                        text: 'Server Manager',
                        scope: me,
                        handler: me.onServerManagerClick
                      }
                    ]
                  }
                },
                '->',
                {
                    xtype: 'label',
                    id: 'statusLabel',
                    style: 'margin-right: 25px;'
                },
                {
                    xtype: 'label',
                    id: 'serverNameLabel',
                    html: 'Currently connected to: '
                },
                {
                    xtype: 'label',
                    cls: 'serverName',
                    style: 'margin-right: 20px;',
                    html: ( typeof Config != 'undefined' ) ? Config.name : '( No server selected. )'
                }
              ]
            }
          ],
          items: [
            Ext.create('BISC.view.ImagesPanel', {
                id: 'ImagesPanel',
                flex: 3,
                border: false,
                layout: 'fit',
                region: 'center'
            }),
            Ext.create('BISC.view.PropertiesPanel', {
                id: 'Properties',
                flex: 1,
                region: 'east',
                split: true,
                layout: 'fit',
                border: false,
                collapsible: true,
                hideCollapseTool: false,
                title: 'Properties',
                titleCollapse: false,
                collapseMode: 'header'
            }),
            {
				xtype: 'panel',
				id: 'viewsPanel',
                flex: 1,
                region: 'west',
                split: true,
				activeItem: 0,
				border: false,
				layout: {
					type: 'card'
				},
				defaults: {
					border: false,
					autoScroll: true
				},
				titleCollapse: false,
				region: 'west',
				width: 350,
				split: true,
				dockedItems: [{
					xtype: 'toolbar',
					id: 'viewsPagingToolbar',
					dock: 'top',
					layout: {
						pack: 'start',
						align: 'center',
						type: 'hbox'
					},
					items: [{
						xtype: 'button',
						flex: 1,
						text: '<',
						scope: this,
						handler: this.decrementView
					},{
						xtype: 'label',
						flex: 6,
						style: 'text-align: center',
						cls: 'x-panel-header-text x-panel-header-text-default-framed',
						id: 'viewsPagingTitle',
						text: 'Monitors'
					},{
						xtype: 'button',
						flex: 1,
						text: '>',
						scope: this,
						handler: this.incrementView
					}]
				}],
				items: [
                    Ext.create('BISC.view.MonitorsPanel', {
                        id: 'FoldersPanel',
                        border: false,
                        listeners: {
                            show: function( el, opts ) {
                                Ext.getCmp('viewsPagingTitle').setText('Monitors');
                            }
                        }
                    }),
                    Ext.create('BISC.view.CategoryTreePanel')
				]
			},
            {
                xtype: 'component',
                cls: 'statusbar',
                height: 20,
                hidden: true,
                region: 'south',
                id: 'imageDetailsBar',
                style: 'background-color: #999; color: #FFF; text-align: center;',
                styleHtmlContent: false
            }
          ]
        }
      ]
    });

    me.callParent(arguments);
  },

  incrementView: function( btn, e ) {
        var viewCard = Ext.getCmp('viewsPanel').getLayout();
        if ( viewCard.getLayoutItems().indexOf( viewCard.getActiveItem() ) == viewCard.getLayoutItems().length-1 ) {
            viewCard.setActiveItem( 0 );
        } else {
            viewCard.next();
        }
  },

  decrementView: function( btn, e ) {
        var viewCard = Ext.getCmp('viewsPanel').getLayout();
        if ( viewCard.getLayoutItems().indexOf( viewCard.getActiveItem() ) == 0 ) {
            viewCard.setActiveItem( viewCard.getLayoutItems().length-1 );
        } else {
            viewCard.prev();
        }
  },

  switchView: function( menuItem, e ) {
    Ext.getCmp('viewsPanel').getLayout().setActiveItem(menuItem.panelIndex);
  },

  onFolderManagerClick: function(item, e, options) {
    if ( this.folderManagerWindow ) {
      this.folderManagerWindow.show();
    } else {
      this.folderManagerWindow = new BISC.view.FolderManagerWindow();
      this.folderManagerWindow.show();
    }
  },

  onFilterManagerClick: function( item, e, options ) {
    if ( this.filterManagerWindow ) {
      this.filterManagerWindow.show();
    } else {
      this.filterManagerWindow = new BISC.view.FilterManagerWindow();
      this.filterManagerWindow.show();
    }
  },

  onServerManagerClick: function( item, e, options ) {
    if ( this.serverManagerWindow ) {
      this.serverManagerWindow.show();
    } else {
      this.serverManagerWindow = new BISC.view.ServerManagerWindow();
      this.serverManagerWindow.show();
    }
  }

});
